<template>
  <div class="ranking-list">
    <el-card class="box-card" v-for="(item, index) in sortedRankingData" :key="item.id">
      <template #header>
        <div class="card-header">
          <div class="rank-icon">
            {{ index + 1 }}
          </div>
          <div class="author-info">
            <img :src="item.avatar || 'https://via.placeholder.com/40'" alt="avatar" class="avatar" />
            <span class="author-name">{{ item.author }}</span>
          </div>
          <el-button type="primary" size="mini" class="like-button">
            👍 {{ item.likeCount }}
          </el-button>
        </div>
      </template>
      <div class="card-content">
        <p class="content-text">{{ item.content }}</p>
        <small class="date-text">{{ formatDate(item.date) }}</small>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    rankingData: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  computed: {
    // 计算属性来对排行榜数据按照likeCount进行排序
    sortedRankingData() {
      return this.rankingData.slice().sort((a, b) => b.likeCount - a.likeCount);
    }
  },
  methods: {
    formatDate(dateString) {
      const date = new Date(dateString);
      return date.toLocaleDateString() + " " + date.toLocaleTimeString(); // 格式化日期
    }
  }
};
</script>

  
  
  <style scoped>
  .ranking-list {
    padding: 20px;
    background-color: #f5f5f5; /* 设置整体背景色 */
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .box-card {
    margin-bottom: 15px;
    border-radius: 8px;
    background-color: #ffffff; /* 卡片背景色 */
    border: 1px solid #eaecef; /* 边框样式 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .box-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  }
  
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: bold;
  }
  
  .rank-icon {
    font-size: 20px;
    font-weight: 700;
    color: #409eff;
    margin-right: 10px;
  }
  
  .author-info {
    display: flex;
    align-items: center;
    flex-grow: 1;
  }
  
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    border: 2px solid #dcdfe6; /* 添加边框 */
  }
  
  .author-name {
    font-size: 16px;
    font-weight: 500;
    color: #333333;
  }
  
  .like-button {
    padding: 5px 10px;
  }
  
  .card-content {
    margin-top: 10px;
  }
  
  .content-text {
    font-size: 14px;
    color: #666666;
    line-height: 1.5;
  }
  
  .date-text {
    font-size: 12px;
    color: #999999;
    margin-top: 8px;
    display: block;
  }
  </style>